<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-icons/bootstrap-icons.css">
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/bootstrap.bundle.js"></script>
    <style>
        .nav-pills.nav-link.active,
        .nav-pills .show>.nav-link {
            color: #000;
            background-color: white !important;
            border-bottom: 2px solid #007bff;
            border-radius: 0px;
        }
    </style>
</head>

<body>
    <div class="w-25 mx-auto mt-5 p-3 shadow">
        <!-- 主登陆界面 -->
        <ul class="nav nav-pills" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#account-pane"
                    type="button" role="tab" aria-controls="home" aria-selected="true">微信登录</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#mobile-pane" type="button"
                    role="tab" aria-controls="profile" aria-selected="false">QQ登录</button>
            </li>

        </ul>

        <!-- 副登陆界面 -->
        <div class="tab-content mt-3">
            <div class="tab-pane active" id="account-pane" role="tabpanel" aria-labelledby="home-tab">
                <div class="form-group">
                    <input type="text" name="account" placeholder="请输入账号" class="form-control">
                </div>
                <div class="form-group">
                    <input type="password" name="password" placeholder="请输入密码" class="form-control">
                </div>
                <div class="form-group text-right">
                    <a href="" class="small">忘记密码?</a>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-block">登录</button>
                </div>
                <div class="form-group">
                    <input type="checkbox" name="agree" class="mr-1">遵守网易用户协议和隐私政策
                </div>
            </div>

            <div class="tab-pane" id="mobile-pane" role="tabpanel" aria-labelledby="home-tab">
                <div class="form-group small text-mutted small">
                    验证即登录，未注册将自动创建网易云账号
                </div>
                <div class="from-group">
                    <input type="text" name="mobile" class="form-control" placeholder="请输入手机号">
                </div>
                <div class="from-group my-3">
                    <div class="position-relative">
                        <input type="text" name="code" class="form-control" placeholder="请输入验证码">
                        <a href="" class="position-absolute border-left px-2" style="right:0; top:4px">发送验证码</a>
                    </div>
                </div>
                <div class="from-group mt-5">
                    <button class="btn btn-primary btn-block">登录</button>
                </div>
                <div class="form-group">
                    <input type="checkbox" name="agree" class="mr-1">遵守网易用户协议和隐私政策
                </div>
            </div>
        </div>

    </div>

</body>

</html>